<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建一个按钮,点下就发送Ajax的get请求 -->
    <button value="helloBtn" id="btn1">按钮</button>
    <!-- 创建一个div,用于接收响应数据 -->
    <div class="get"></div>
</body>
<script>
    var btn1 = document.querySelector("#btn1")
    var get = document.querySelector(".get")
    btn1.addEventListener("click",function(){
        // console.log("发送Ajax get 请求");
        //第一步:创建Ajax核心对象 XMLHttpRequest
        var xhr = new XMLHttpRequest();
        //第二步:注册回调函数(在readystate状态值发生改变时才会执行)
        xhr.onreadystatechange = function(){
            //这个回调函数会被调用多次
            //0->1时调用一次
            //1->2时调用一次
            //2->3时调用一次
            //3->4时调用一次
            console.log(xhr.readyState);
            //当readyState等于4时表示响应结束
            //结束后会有一个HTTP状态码
            console.log(this.status);

            //通过XMLHttpRequest对象responseText返回数据
            //responseText都以普通文本的形式获取,不管服务器返回的是什么类型
            // alert(this.responseText)
            get.innerHTML = this.responseText
        }
        //第三步:开启通道(只打开通道,不会发送请求)
        //用open(method,url, async,user, psw)方法
        //method:请求方式,POST GET等
        //url:请求的路径
        //async:只能是true或者false
        //      true表示此Ajax请求是一个异步请求(一般都是true)
        //      false表示此Ajax请求是一个同步请求
        //user:用户名 psw:密码 有的服务器如果想访问,会需要用户名和密码,这时就需要用到这两个
        //                      不需要的时候就可以不写
        //get请求如何发送数据-在请求行上添加
        //格式:url?name=value&name=value&name=value...
        xhr.open("GET","./Ajax-request.html?uid=100&uname=zhangsan",true)
        //第四步:发送请求
        xhr.send()
    })
</script>
</html>